<template>
  <div>
    <h3>销售统计<span class="title"> {{ params.start.slice(0,10) }} ~ {{ params.end.slice(0,10) }}</span></h3>
    <ul>
      <li>
        <p>{{ orderCount }}</p>
        <p class="order">订单量（个）</p>
      </li>

      <li>
        <p>{{ orderAmount }}</p>
        <p class="order">销售额（万元）</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { getOrderAmount, getOrderCount } from '@/api'
export default {
  data() {
    return {
      params: {
        start: '2022-10-01 00:00:00',
        end: new Date().toLocaleString().replace(/\//g, '-')
      },
      orderAmount: 0,
      orderCount: 0
    }
  },
  async created() {
    const { data } = await getOrderAmount(this.params)
    // console.log(res)
    this.orderAmount = (data / 10000).toFixed(2)
    const res = await getOrderCount(this.params)
    // console.log(res)
    this.orderCount = res.data
  }
}
</script>

<style lang="scss" scoped>
h3 {
  font-size: 16px;
  font-weight: normal;
  .title{
    height: 21px;
    display: inline-block;
    line-height: 21px;
    margin-left: 10px;
    color: #999;
    font-size: 12px;
  }
}
ul{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  li {
    text-align: center;
    margin-top: 10px;
    margin-left: 20px;
     color: #ff5757;
    flex: 1;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);

    .order {
      height: 17px;
      line-height: 17px;
      color: #de9690;
      font-size: 12px;
      text-shadow:none;
    }
  }
}
</style>
